<template>
    <st-uni-loadmore ref="loadmoreref">
        <view class="activity-list">
            <uni-group>
                <view style="margin-top:4px;" class="uni-card box-shadow-none" v-for="(item,index) in listData" :key="index">
                    <uni-swipe-action>
                        <uni-swipe-action-item  :right-options="options" :disabled="item.disabled"  @click="bindClick($event, item)">
                            <view class="uni-card-content uni-list-cell">
                                <navigator class="fh-width-100" :url="'/pages/activity/detail?id=' + item.id">
                                    <view class="uni-media-list">
                                        <view class="uni-media-list-logo">
                                            <image :src="item.titleUrl"></image>
                                        </view>
                                        <view class="uni-media-list-body">
                                            <view class="uni-media-list-text-top  font-size-md">{{item.title}}</view>
                                            <view class="uni-media-list-text-body uni-text font-size-sm">

                                            </view>
                                            <view class="uni-media-list-text-bottom uni-ellipsis font-size-sm">{{item.introduced}}
                                            </view>
                                        </view>
                                    </view>
                                </navigator>
                            </view>
                            <view class="uni-card-footer">
                                <view class="uni-card-link">{{item.participateTotal}}/{{item.participateLimitTotal}} 人
                                </view>

                                <view class="uni-card-link">
                                  已报名
                                </view>
                            </view>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </view>

            </uni-group>
        </view>
    </st-uni-loadmore>
</template>

<script>
    import StUniLoadmore from "../../components/StUniLoadmore";

    export default {
        components: {StUniLoadmore},
        data() {
            return {
                options:[
                    {
                        text: '退款',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }
                ],
                // 列表信息
                listData: []
            }
        },
        onPullDownRefresh(){
            this.loadData(true)
        },
        onReachBottom() {
            this.loadData(false)
        },
        onLoad(){

        },
        onReady(){
            this.loadData(true)
        },
        methods: {
            doRefund(data){
              if(!data.orderNo){
                uni.showToast({
                  duration: 3000,
                  icon: 'none',
                  title: '当前活动订单不支持退款'
                });
                return
              }
              let refundForm = {}
              //退款信息
              refundForm.orderNo = data.orderNo
              //refundForm.amount =   // 退款金额，单位为分 不填默认走订单支付金额
              refundForm.mpAppCode = this.$config.mpAppCode
              refundForm.channel = 'wwdH5'
              refundForm.categoryDictValue = 'wwd_activity'
              refundForm.remark = '活动退款'
              uni.showLoading({title: '退款中...'})
              this.$http.post('/order-refund/refund', refundForm).then((res) => {
                uni.showToast({
                  duration: 3000,
                  icon: 'none',
                  title: '操作成功'
                });
                this.loadData(true)
              }).catch((res) => {
                uni.showToast({
                  duration: 3000,
                  icon: 'none',
                  title: res.data.errorMsg
                });
              }).finally(() => {
                uni.hideLoading()
              })
            },
            bindClick(e,data){
              uni.showModal({
                title: '退款提示',
                cancelText:'取消',
                confirmText:'确定',
                content: '您确定要进行退款，退款操作将退出此活动：' + data.title,
                showCancel: true,
                success: (res) => {
                  if (res.confirm) {
                      this.doRefund(data)
                  }
                }
              })
            },
            loadData:function(pullDownRefresh){
                if(!this.$refs.loadmoreref){
                    return
                }

                this.$refs.loadmoreref.loadData('/app/activity/my/getPage',{
                    pullDownRefresh:!!pullDownRefresh
                }).then(res=> {
                    let content = res.data.records

                    content.forEach((v)=>{
                      //退款滑动禁用
                      v.disabled = (v.orderNo) ? false : true
                    })
                    if(pullDownRefresh){
                        this.listData = content
                    }else{
                        this.listData = this.listData.concat(content);
                    }
                })
            }
        }
    }
</script>

<style>

    .fh-search-view {
        width: 50%;
        display: flex;
        background-color: #e7e7e7;
        height: 30px;
        border-radius: 15px;
        padding: 0 4%;
        flex-wrap: nowrap;
        margin: 7px 0;
        line-height: 30px;
    }

    swiper {
        font-size: 16px;
    }

    .fh-image-view {
        padding: 1px;
        height: 135px;
        width: 135px;
        overflow: hidden;
    }

    .uni-media-list-logo {
        height: 80px;
        width: 80px;
        margin-right: 8px;
    }

    .uni-media-list-body {
        height: 65px;
    }

    .uni-card {
        margin: 4px 0 !important;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, .3);
    }

    .image {
        width: 100%;
    }
</style>
